<template>
  <div class="box">
    <!-- 我是首页分类页面 -->
    <div class="top">
      <van-tabs @click="todi" v-model="active">
        <van-tab
          v-for="item in brotherCategory"
          :key="item.id"
          :title="item.name"        
        >
          <h3>{{ item.name }}</h3>     <!-- 分类的标题-->
          <p>{{ item.front_desc }}</p>  <!--分类的当前类别文字描述-->
        </van-tab>
      </van-tabs>
    </div>

    <!-- 内容区域 -->
    <ul>
        <li v-for="item in goodsList" :key="item.id" @click="Togoodsdata(item.id)"> 
            <img v-lazy="item.list_pic_url" alt="">      <!-- 分类中的商品的图片-->
            <h6>{{item.name}}</h6>                      <!-- 分类中的商品的名称-->
            <p>{{item.retail_price | formarMoney}}</p>  <!-- 分类中的商品的价格-->
        </li>
    </ul>
  </div>
</template>

<script>
// 引入需要的请求
// Goodsdata  是获取分页分类页面商品列表
// goodscategory 是首页中单价网格数据是触发获取分类数据列表  需要参数为id
import { goodscategory, Goodsdata } from "@/utils/http";
export default {
  name: "GoodsFnlei",
  data() {
    return {
      active: 0,            // 当前选中的类下标
      brotherCategory: [],  //分类页面的分类列表数据
      
      page:1,             //当前的页数
      size:100,            //每页的显示个数
      goodsList:[],       //每一条商品的数据
      categoryId:''       //当前分类的id值
    };
  },
  created() {
    console.log(this.$route.query.id);
    goodscategory({
      // 调用获取商品分类的请求需要传递的参数
      id: this.$route.query.id,
      
    }).then((res) => {
      console.log(res);
      // let { brotherCategory, currentCategory } = res.data.data;
      // this.brotherCategory = brotherCategory;
      // console.log(this.brotherCategory);
    
      //  this.id = currentCategory.id.toString();
      //   this.name = currentCategory.name; // 当前类别name
      // this.frontDesc = currentCategory.front_desc; // 当前类别文字描述
     
      //调用获取当前类对应的产品数组
        this.brotherCategory=res.data.data.brotherCategory;
        // 获取当前点击的分类的id值
        this.categoryId=res.data.data.currentCategory.id.toString();
          this.brotherCategory.forEach((item, index) => {
        if (this.$route.query.id == item.id) {
          this.active = index; //  当前选中的类下标        
        }
      });
      //将这个请求,写在这是因为请求是异步的,如果写在下面,其需要的参数还没有被赋值,是无法使用的
      this.GetCateGoryListData(this.categoryId) // 页面中的商品列表请求  内容区域
    });
//  this.GetCateGoryListData(this.categoryId)  //在这个发送请求是无法使用的
  },
  
  methods:{
    todi(title,name){     //这个是分类标签的点击事件的回调函数
     console.log(title,name);   
    // 这里是将分类的数组进行遍历,提取其中的分类的名称
      this.brotherCategory.forEach((item) => {
        if (item.name == name) {  //这里是进行比较判断当前点击的分类中名称 是否和有相等的
      //  相等的话就将分类数组中对象的分类的id赋值给 调用调用页面中的商品列表请求 中需要的id值
          this.categoryId = item.id.toString();   
        }
      });    
      this.GetCateGoryListData(this.categoryId)  //调用页面中的商品列表请求
    },
   // 页面中的商品列表请求的方法 内容区域
    GetCateGoryListData(id){    
       
    let params={
      categoryId:id,     //当前分类的id值   
      page:this.page,    //当前的页数
      size:this.size,    //每页的显示个数
    }
    // 发送商品列表请求
    Goodsdata(params).then(res=>{
    this.goodsList=res.data.data.goodsList   //获取商品列表信息
    })
    },

    // 点击商品跳转到商品的详情页面 并将商品的id值传入到商品的详情页面中
    Togoodsdata(id){
       this.$router.push({path:'/goodsdetails',query:{id:id}})
    }
  }
};
</script>

<style scoped lang='less'>
.box {
  .top {
    text-align: center;
    h3 {
      font-size: 20px;
      margin:20px 0;
    }
    p {
      font-size: 16px;
    }
  }
  // 内容区,商品的列表
  ul{
    display:flex;   //开启弹性盒子
    flex-wrap: wrap;  //是否允许换行
    text-align: center;
    li{
      margin-bottom: 10px;
      width:50%;
      img{
        width:100%;
      }
      h6{
        margin:10px;
        line-height: 25px;
        font-size:16px;  
      }
      p{
        color:red;
        font-size:16px;
      }

    }
  }
}
</style>